<template>
  <div>
    <up-down-layout :header="'角色管理'" :handleFlag="true" >
      <template slot="query">
        <search-form :componentList="componentList" :formValue="queryParas" @handleFilter="handleFilter"
          @clearParam="clearParam">
        </search-form>
      </template>
      <template slot="table">
        <!-- table表格 -->
        <data-table :toolMenuFlag="true" @onCreateRow="addData" :sourceData="sourceData" :queryParas="queryParas"
          @onEditRow="onEditRow" :menuFlag="false" :IsRight="false" :operateBtnLayout="operateBtnLayout"
          :columns="columns" :deleteApi="api" :api="api" :loadCount="loadCount" :operatWidth="'200px'"
        >
          <template scope-slot="button" v-slot:button="row">
            <el-button icon="el-icon-menu" class="iconCircle" :title="'菜单授权'" @click="menuAuth(row)"></el-button>
            <el-button icon="el-icon-s-custom" class="iconCircle" :title="'分配用户'" @click="userAuth(row)"></el-button>
          </template>
        </data-table>
      </template>
    </up-down-layout>
    <!-- 角色管理弹框 -->
    <roleEdit :editModel="editModel" :visible.sync="dialogVisible" v-if="dialogVisible" :form="item" :api="api" @handSearch="handleFilter"/>
    <!-- 菜单授权 -->
    <menuAuth :visible.sync="menuVisble" :rowId="rowId" v-if="menuVisble" @handSearch="handleFilter"/>
    <!-- 分配用户 -->
    <userAuth :visible.sync="userVisble" :rowId="rowId" v-if="userVisble" @handSearch="handleFilter"/>
  </div>
</template>
<script>
import BaseManage from '@/pages/baseManage'
import upDownLayout from '@/components/element/upDownLayout'
import searchForm from '@/components/element/searchForm'
import DataTable from '@/components/element/DataTable'
// import AuthButton from '@/components/auth/authButton'
import { sysRole } from '@/api/platformApi'
import roleEdit from '@/pages/systemManage/roleManage/roleEdit'
import menuAuth from '@/pages/systemManage/roleManage/menuAuth'
import userAuth from '@/pages/systemManage/roleManage/userAuth'
import { formatDict } from '@/filters/index'
export default {
  // 继承baseManage里的公共方法和定义的属性
  extends: new BaseManage(),
  name: 'roleManage',
  components: {
    upDownLayout,
    searchForm,
    DataTable,
    roleEdit,
    menuAuth,
    userAuth
  },
  data () {
    return {
      componentList: [
        {
          prop: 'name',
          componentName: 'el-input',
          label: '角色名称：',
          lableWidth: '100px',
          value: 'name',
          placeholder: '请输入角色名称'
        }
      ],
      queryParas: {
        name: ''
      },
      sourceData: [
      ],
      // talbe显示的每一项
      columns: [
        {
          prop: 'name',
          label: '角色名称',
          align: 'left'
        },
        {
          prop: 'enname',
          label: '角色编码',
          align: 'left'
        },
        {
          prop: 'useable',
          label: '状态',
          align: 'center',
          width: '100px',
          format: row => { return formatDict(row.useable, 'useable') }
        },
        {
          prop: 'remarks',
          label: '备注',
          align: 'left'
        }
      ],
      // 操作列需要显示的按钮
      operateBtnLayout: 'C,E,V,D',
      menuVisble: false, // 菜单授权
      userVisble: false, // 用户授权
      rowId: ''
    }
  },
  computed: {
    api () {
      return sysRole
    }
  },
  methods: {
    // 菜单授权
    menuAuth (data) {
      this.rowId = data.row.id
      this.menuVisble = true
    },
    // 分配用户
    userAuth (data) {
      this.rowId = data.row.id
      this.userVisble = true
    }
  }
}
</script>
